<!DOCTYPE html>
<html>
  <head>
    <title>Chat (a.k.a infinite feed)</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/coffee-script.js"></script>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="../../dist/transparency.min.js"></script>
  </head>
  <body>
    <h1>Chat (a.k.a infinite feed)</h1>
    <form id="send-message">
      <input type="text" name="message" />
      <input type="submit" value="Send message" />
    </form>
    <div id="messages"></div>

    <!--- Hidden with css -->
    <div id="templates">
      <div class="message">
        <span class="text"></span>
      </div>
    </div>

    <script type="text/coffeescript">
      $(document).ready ->
        # Get the template and remove it from DOM, as we are rendering to a separate location
        template = $('#templates .message').detach()
        messages = $('#messages')
        input    = $('input[name="message"]')

        $('#send-message').submit (event) ->
          event.preventDefault()
          message = template.render text: input.val()
          messages.prepend message.clone()
          input.val ""
    </script>
  </body>
</html>
